<template>
  <div class="cell">
    <!-- 列表 -->
    <div
      v-for="(arr, index) in list"
      :key="index"
      class="cell-group"
      :class="{
        'cell-group-hidden': arr.length == 0,
      }"
    >
      <div
        class="cell-list items-center"
        v-for="(item, idx) in arr"
        :key="item.id"
        :class="{
          'cell-list-bm': idx + 1 != arr.length,
        }"
      >
        <!-- 左侧 -->
        <div class="cell-item-left items-center">
          <img
            v-if="item.showStatus == 1"
            class="cell-item-left-bg"
            src="/image/lotterymoney/free-card1-bg1.svg"
          />
          <img
            v-else-if="item.showStatus == 2"
            class="cell-item-left-bg"
            src="/image/lotterymoney/free-card1-bg2.svg"
          />
          <img
            v-else
            class="cell-item-left-bg"
            src="/image/lotterymoney/free-card1-bg3.svg"
          />
          <div class="cell-item-left-title">
            {{ $t("lotteryMoney.mfxzk") }}
          </div>
          <div
            class="cell-item-left-tag"
            :class="{
              'cell-item-left-tag-ygq': item.showStatus == 2,
            }"
          >
            {{
              $t(
                item.showStatus == 1
                  ? "common.wsy"
                  : item.showStatus == 2
                  ? "common.ygq"
                  : "common.ysy"
              )
            }}
          </div>
        </div>
        <!-- 信息 -->
        <div class="cell-item-right items-center">
          <!-- 类型标题 -->
          <div class="cell-item-right-title">
            {{ taskStatus(item.prizeType) }}
          </div>
          <!-- 获得时间: 未使用,已过期 -->
          <div class="cell-item-right-time">
            {{ $t("lotteryMoney.hdsj") }} {{ item.sendTimeStr }}
          </div>
          <!-- 使用时间: 未使用,已使用-->
          <div v-if="item.showStatus == 3" class="cell-item-right-time">
            {{ $t("lotteryMoney.usesj") }} {{ item.useTimeStr }}
          </div>
          <!-- 过期时间 未使用,已过期-->
          <div
            v-if="item.showStatus == 1 || item.showStatus == 2"
            class="cell-item-right-time"
          >
            {{ $t("lotteryMoney.sxsj") }} {{ item.recycleTimeStr }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="inviteFriendsFreeCell">
import { useGlobalStore } from "~~/store/global";

const globalStore = useGlobalStore();
const { t } = useI18n();
const props = withDefaults(
  defineProps<{
    list: any;
  }>(),
  {
    list: [],
  }
);

// 任务状态
const taskStatus = (type: number) => {
  // 1:新人奖励 2:每日领取奖励(新版超级抽奖) 3:免费次数邀友-好友注册(新版超级抽奖) 4:免费次数邀友-好友首次入金(新版超级抽奖) 5:挽留宝箱 6:分享给好友获得的免费抽奖 7:邀友首充-幸运宝箱-免费下注奖励 8:首页10张免费下注卡 为空默认是1
  if (type == 1) {
    return t("inviteFriends.xrfl");
  } else if (type == 2) {
    return t("lotteryMoney.mrcjfl");
  } else if (type == 3) {
    return t("lotteryMoney.cjyyzc");
  } else if (type == 4) {
    return t("lotteryMoney.cjyycz");
  } else if (type == 5) {
    return t("inviteFriends.bxjl");
  } else if (type == 6) {
    return t("inviteFriends.yqhyjl");
  } else if (type == 7) {
    return t("inviteFriends.yqhyjl");
  } else if (type == 8) {
    return t("inviteFriends.yqhyjl");
  } else {
    return {
      title: "--",
      desc: "--",
    };
  }
};
</script>
<style scoped lang="scss">
.cell {
  position: relative;
  border-top: 10 * 2px solid #f4f5f7;

  &-group {
    padding: 12 * 2px 15 * 2px;
    background-color: #fff;
    margin-bottom: 10 * 2px;
    &-hidden {
      padding: 0;
      margin: 0;
    }
  }

  &-list {
    position: relative;
    border-radius: 8 * 2px;
    overflow: hidden;
    background-color: #ecf5ff;

    &-bm {
      margin-bottom: 15 * 2px;
    }
  }

  &-item {
    position: relative;
    &-ygq {
      background-color: #f0f3fa;
    }

    &-left {
      width: 121 * 2px;
      height: 90 * 2px;
      position: relative;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;

      &-bg {
        position: absolute;
        z-index: 8;
        top: 0;
        left: 0;
        width: 121 * 2px;
        height: 90 * 2px;
        object-fit: cover;
      }
      &-title {
        position: relative;
        width: calc(100% - 12 * 2px);
        text-align: center;
        z-index: 9;
        color: #fff;
        font-size: 13 * 2px;
        font-weight: 590;
        margin-bottom: 4 * 2px;
      }
      &-tag {
        position: relative;
        z-index: 9;
        align-self: center;
        margin-right: 11 * 2px;
        color: #007bff;
        font-size: 11 * 2px;
        white-space: nowrap;
        font-weight: 400;

        padding: 4 * 2px;
        border-radius: 4 * 2px;
        background: rgba(255, 255, 255, 0.6);

        &-ygq {
          color: #7c9ebe;
        }
      }
    }

    &-right {
      flex: 1;
      position: relative;
      width: 100%;
      height: 82 * 2px;
      margin: 4 * 2px 4 * 2px 4 * 2px 0;

      border: 0.7 * 2px solid #def;
      border-left: none;
      border-radius: 0 * 2px 6 * 2px 6 * 2px 0 * 2px;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      background-color: #ecf5ff;

      &-title {
        color: #3b4d5f;
        font-size: 11 * 2px;
        font-weight: 400;
        margin-bottom: 6 * 2px;
      }
      &-time {
        color: #abb3bd;
        font-size: 11 * 2px;
        white-space: nowrap;
        font-weight: 400;
        margin-bottom: 6 * 2px;
      }
    }
  }
}
</style>
